<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="page-breadcrumb">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="small">
            <el-form-item label>
                <el-input v-model="queryForm.name" placeholder="角色名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="queryForm.state" placeholder="请选择状态" clearable>
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button
                    v-if="authMap['scjs']"
                    type="danger"
                    @click="onDeleteRoleBatch"
                    icon="el-icon-delete"
                    :disabled="selectedItems.length <= 0"
                >删除</el-button>
                <el-button v-if="authMap['xjbjjs']" type="default" @click="onAdd" icon="el-icon-plus">新建</el-button>
            </el-form-item>
        </el-form>
        <table-ex
            ref="tableEx"
            :queryCallback="queryCallback"
            :handleSelectionChange="onSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="角色名称">
                <template slot-scope="scope">
                    <div>
                        <strong style="margin-right:10px;">{{scope.row.name}}</strong>
                        <el-tag
                            size="small"
                            v-if="scope.row.state == 2"
                            type="danger"
                            :disable-transitions="true"
                            effect="plain"
                        >禁用</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="角色唯一编码"></el-table-column>
            <el-table-column prop="description" label="角色描述" minWidth="180"></el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <el-button
                        v-if="authMap['xjbjjs']"
                        type="default"
                        size="mini"
                        class="button-in-cell"
                        @click="onUpdate(scope.row.id)"
                    >编辑</el-button>
                    <el-button
                        v-if="authMap['jsqxgk']"
                        type="default"
                        size="mini"
                        class="button-in-cell"
                        @click="onAuth(scope.row.id)"
                    >权限管控</el-button>
                    <el-dropdown size="small" style="margin-left:10px;">
                        <span class="el-dropdown-link">
                            <el-button type="default" size="mini" class="button-in-cell">
                                更多
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                v-if="scope.row.state !== 1 && authMap['qyjyjs']"
                                style="color:#67C23A"
                                icon="iconfont icon-detail"
                                @click.native="onEnableRole(scope.row)"
                            >启用</el-dropdown-item>
                            <el-dropdown-item
                                v-if="scope.row.state === 1 && authMap['qyjyjs']"
                                style="color:#E6A23C"
                                icon="el-icon-remove-outline"
                                :divided="scope.row.state !== 1"
                                @click.native="onDisableRole(scope.row)"
                            >禁用</el-dropdown-item>
                            <el-dropdown-item
                                v-if="authMap['scjs']"
                                style="color:#ed4014"
                                icon="el-icon-delete"
                                :divided="scope.row.state !== 1"
                                @click.native="onDelete(scope.row)"
                            >删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </table-ex>
        <sys-role-add :show="showAddDialog" :success="onAddSuccess" :cancel="onAddCancel"></sys-role-add>
        <sys-role-update
            :show="showUpdateDialog"
            :success="onUpdateSuccess"
            :cancel="onUpdateCancel"
            :id="updateId"
        ></sys-role-update>
        <sys-role-auth
            :show="showAuthDialog"
            :success="onAuthSuccess"
            :cancel="onAuthCancel"
            :id="authId"
        ></sys-role-auth>
    </div>
</template>

<script>
import role_api from '../../api/role_api'
import TableEx from '../../components/TableEx.vue'
import SysRoleAdd from './SysRoleAdd.vue'
import SysRoleUpdate from './SysRoleUpdate.vue'
import SysRoleAuth from './SysRoleAuth.vue'
import { mapState } from 'vuex'
export default {
    components: {
        TableEx,
        SysRoleAdd,
        SysRoleUpdate,
        SysRoleAuth,
    },
    data() {
        return {
            queryForm: {},
            selectedItems: [],
            showAddDialog: false,
            showUpdateDialog: false,
            updateId: null,
            showAuthDialog: false,
            authId: null,
            showDetailDialog: false,
            detailId: null,
        }
    },
    computed: {
        ...mapState({
            authMap: state => state.auth.authMap
        })
    },
    methods: {
        queryCallback(param) {
            return role_api.page({
                query: this.queryForm,
                ...param
            })
        },
        onQuery(event = null, type = 1) {
            this.$refs.tableEx.refresh(type)
        },
        onAdd() {
            this.showAddDialog = true
        },
        onAddSuccess() {
            this.showAddDialog = false
            this.onQuery()
        },
        onAddCancel() {
            this.showAddDialog = false
        },
        onUpdate(id) {
            this.updateId = id
            this.showUpdateDialog = true
        },
        onUpdateSuccess() {
            this.showUpdateDialog = false
            this.onQuery(null, 2)
        },
        onUpdateCancel() {
            this.showUpdateDialog = false
        },
        onAuth(id) {
            this.authId = id
            this.showAuthDialog = true
        },
        onAuthSuccess() {
            this.showAuthDialog = false
            this.onQuery(null, 2)
        },
        onAuthCancel() {
            this.showAuthDialog = false
        },
        onDetail(id) {
            this.detailId = id
            this.showDetailDialog = true
        },
        onDetailCancel() {
            this.showDetailDialog = false
        },
        onDelete(role) {
            this.$confirm(`<p>删除角色：<strong>${role.name}</strong>，是否继续?</p>`, '确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                role_api.deleteRole(role.id).then(data => {
                    this.$message.success('删除成功!')
                    this.onQuery(null, 3)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onDeleteRoleBatch() {
            if (this.selectedItems.length <= 0) {
                return
            }
            this.$confirm(`<p>批量删除角色：<p><strong>${this.selectedItems.map(e => e.name).join(", ")}</strong></p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                role_api.deleteRoleBatch(this.selectedItems.map(e => e.id)).then(data => {
                    this.$message.success('批量删除成功!')
                    this.onQuery(null, 3)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onSelectionChange(items) {
            this.selectedItems = items
        },
        onDisableRole(role) {
            this.$confirm(`<p>禁用角色：<strong>${role.name}</strong></p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                role_api.disableRole(role.id).then(data => {
                    this.$message.success('禁用成功')
                    this.onQuery(null, 2)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onEnableRole(role) {
            this.$confirm(`<p>启用角色：<strong>${role.name}</strong></p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                role_api.enableRole(role.id).then(data => {
                    this.$message.success('启用成功')
                    this.onQuery(null, 2)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        }
    }
}
</script>

<style>
</style>